<template>
    <div class="wrapper">
        <!--header部分-->
        <div class="header">
            <img class="img1" :src="picture" alt="">
            <a class="login" @click="tologin">{{name}}</a>
        </div>

        <!--功能部分-->
        <div class="list">
            <section>
                <div class="useradd" @click="touseraddress">
                    我的地址
                </div>
            </section>
            <section>
                <div class="business" v-if="user.type!=2" @click="tobusinessinfo">
                    入驻商家
                </div>
            </section>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default {
        name: "myInfo",
        data() {
            return {
                picture: 'https://zx-1257224788.cos.ap-chengdu.myqcloud.com/images/83b5f298-6de9-4f58-8174-0edce943b127.png',
                user: {
                    type: 0
                },
                name: "登录/注册"
            }
        },
        created() {

            this.user = JSON.parse(this.$getSessionStorage('user'))
            console.log(this.user)
            if (this.user !== null) {
                this.picture = this.user.picture
                this.name = this.user.username
            } else {
                this.user = {
                    type: 0
                }
            }
        },
        methods: {

            tologin() {
                if (this.user === null) {
                    this.$router.push({path: '/login'});
                }

            },
            touseraddress() {
                this.$router.push({path: '/UserAddress'});
            },
            tobusinessinfo() {
                this.$router.push({path: '/applyBusiness'});
            }
        },
        components: {
            Footer
        }
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
        background-color: rgb(247, 247, 247);
    }

    /****************** header部分 ******************/
    .wrapper .header {
        width: 100%;
        height: 30vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 6vw;
        font-weight: bold;
        padding-left: 20px;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        align-items: center;
    }

    .wrapper .header .img1 {
        width: 50.56px;
        height: 50.56px;
        border-radius: 100%;
        overflow: hidden;

        padding: 2%;
        display: flex;
    }

    .wrapper .header .login {
        left: 40%;
        padding-left: 10px;
    }

    /****************** 选项部分 ******************/
    .wrapper .list {
        margin-top: 33vw;
        width: 100%;
        font-size: 4.5vw;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

    }

    .wrapper .list section .useradd {
        text-align: center;
        line-height: 100%;
        box-sizing: border-box;
        padding: 6vw 6vw;
        height: 8vw;
        display: flex;
        background-color: rgb(255, 255, 255);
        border-top: solid 1px rgb(200, 200, 200);
        border-bottom: solid 1px rgb(200, 200, 200);
        align-items: center;

    }

    .wrapper .list section .business {
        text-align: center;
        box-sizing: border-box;
        padding: 6vw 6vw;
        height: 8vw;
        display: flex;
        margin-top: 3vw;
        background-color: rgb(255, 255, 255);
        border-top: solid 1px rgb(200, 200, 200);
        border-bottom: solid 1px rgb(200, 200, 200);
        align-items: center;
    }


</style>